import "./index.css";
import React from "react";
import { Table, Tag } from "antd";
import { Link } from "react-router-dom";

const columns = [
    {
        title: "序号",
        dataIndex: "key",
        key: "key",
    },
    {
        title: "组件名",
        dataIndex: "name",
        key: "name",
        // defaultSortOrder: 'ascend',
        // 文字排序
        sorter: (a, b) => a.name.localeCompare(b.name),
        // 数字排序
        // sorter: (a, b) => a.age - b.age,
        render: (text) => <Link to={`/${text}`} target="_blank">{text}</Link>,
    },
    {
        title: "描述",
        dataIndex: "description",
        key: "description",
    },
    {
        title: "Tags",
        key: "tags",
        dataIndex: "tags",
        sorter: (a, b) => a.tags.localeCompare(b.tags),
        render: (tag) => {
            // let colorArray = [
            //     'magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple'
            // ]
            let color;
            switch (tag) {
                case "React使用":
                    color = "purple";
                    break;
                case "功能开发":
                    color = "green";
                    break;
                case "js基础使用":
                    color = "cyan";
                    break;
                case "Hooks":
                    color = "red";
                    break;
                case "antd使用":
                    color = "geekblue";
                    break;
                case "第三方库":
                    color = "magenta";
                    break;
                case "echarts使用":
                    color = "orange";
                    break;
                default:
                    break;
            }
            return (
                <Tag color={color} key={tag}>
                    {tag}
                </Tag>
            );
        },
    },
];
const dataSource1 = [
    {
        key: "1",
        name: "AssignDemo",
        description: "assign对象累加用法",
        tags: "js基础使用",
    },
    {
        key: "2",
        name: "AwaitandAsync",
        description: "JS中的async/await的用法和理解",
        tags: "js基础使用",
    },
    {
        key: "3",
        name: "CopytoClipboard",
        description: "复制到粘贴板",
        tags: "功能开发",
    },
    {
        key: "4",
        name: "ExportExcel",
        description: "表格导出【js-export-excel】",
        tags: "第三方库",
    },
    {
        key: "5",
        name: "InputdemoRef",
        description: "ref输入框数据输入",
        tags: "React使用",
    },
    {
        key: "6",
        name: "InputdemoState",
        description: "受控组件state输入",
        tags: "React使用",
    },
    {
        key: "7",
        name: "JsonDatause",
        description: "json数据使用",
        tags: "React使用",
    },
    {
        key: "8",
        name: "ObjectPush",
        description: "object对象push方法使用",
        tags: "js基础使用",
    },
    {
        key: "9",
        name: "ObjectStatechange",
        description: "state中的对象修改",
        tags: "React使用",
    },
    {
        key: "10",
        name: "SetStatedemo",
        description: "setState同步异步问题",
        tags: "React使用",
    },
];
const dataSource2 = [
    {
        key: "11",
        name: "SwitchChange",
        description: "switch通过弹窗状态修改",
        tags: "antd使用",
    },
    {
        key: "12",
        name: "TablefieldFuzzyQuery",
        description: "根据姓名字段进行查询",
        tags: "antd使用",
    },
    {
        key: "13",
        name: "TableSortingandscreening",
        description: "antd中table查询与筛选",
        tags: "antd使用",
    },
    {
        key: "14",
        name: "TableUse",
        description: `antd中的table部分使用,包括编号排序,转换页面后编号顺序排序,点击按钮获取当前行数信息
                （只能获取data中的, 编号index不是data赋值的, 项目中的ID和编号不是一个, ID是传过来的,编号是我们自己加上的）`,
        tags: "antd使用",
    },
    {
        key: "15",
        name: "LazyLoad",
        description: "组件懒加载",
        tags: "React使用",
    },
    {
        key: "16",
        name: "TableJSONUse",
        description:
            "表格使用json，如果查看其他json需要修改一些基础配置项就可以使用",
        tags: "antd使用",
    },
    {
        key: "17",
        name: "UseStateClass",
        description: "hooks中useState使用--class同功能",
        tags: "Hooks",
    },
    {
        key: "18",
        name: "UseStateFun",
        description: "hooks中useState使用--函数式使用",
        tags: "Hooks",
    },
    {
        key: "19",
        name: "UseEffectClass",
        description: "hooks中useEffect使用--class同功能",
        tags: "Hooks",
    },
    {
        key: "20",
        name: "UseEffectFun",
        description: "hooks中useEffect使用--函数式使用",
        tags: "Hooks",
    },
];
const dataSource3 = [
    {
        key: "21",
        name: "UseRefClass",
        description: "hooks中UseRef使用--class同功能",
        tags: "Hooks",
    },
    {
        key: "22",
        name: "UseRefFun",
        description: "hooks中UseRef使用--函数式使用",
        tags: "Hooks",
    },
    {
        key: "23",
        name: "Fragment",
        description: "Fragment标签与空标签类似",
        tags: "React使用",
    },
    {
        key: "24",
        name: "Context",
        description: "父组件和孙组件传值",
        tags: "React使用",
    },
    {
        key: "25",
        name: "Parent",
        description: "组件传值：Parent-child value transfer父传子",
        tags: "React使用",
    },
    {
        key: "26",
        name: "ChangeOptimizePureComponent",
        description: `组件优化，不改变数据不渲染，父组件数据改变，数据子组件没有使用就不修改。本组件用于验证PureComponent方法的使用`,
        tags: "React使用",
    },
    {
        key: "27",
        name: "ChangeOptimizeShouldComponentUpdate",
        description: `组件优化，不改变数据不渲染，父组件数据改变，数据子组件没有使用就不修改。本组件用于验证重写shouldComponentUpdate()方法的使用`,
        tags: "React使用",
    },
    {
        key: "28",
        name: "ErrorBoundary",
        description: `
                    错误边界,在父组件进行使用，限制子组件在生命周期中出现的错误不外扩到整个组件中（仅在生产环境使用）
                `,
        tags: "React使用",
    },
    {
        key: "29",
        name: "Slot",
        description: `
                    相当于vue的插槽，在组件内部可以传值渲染另外一个组件。
                `,
        tags: "React使用",
    },
    {
        key: "30",
        name: "Communication",
        description: `
                    总结react的几种通信方式。
                `,
        tags: "React使用",
    },
];
const dataSource4 = [
    {
        key: "31",
        name: "useReducerFun",
        description: `
            useReducer
        `,
        tags: "Hooks",
    },
    {
        key: "32",
        name: "mouseUse",
        description: `
            鼠标事件
        `,
        tags: "js基础使用",
    },
    {
        key: "33",
        name: "html2canvas",
        description: `
            html2canvas使用【html2canvas】
        `,
        tags: "第三方库",
    },
    {
        key: "34",
        name: "DOMtoImage",
        description: `
            dom节点转图片【dom-to-image】
        `,
        tags: "第三方库",
    },
    {
        key: "35",
        name: "JsonView",
        description: `
            显示json【react-json-view】
        `,
        tags: "第三方库",
    },
    {
        key: "36",
        name: "ReactDnd",
        description: `
            不重叠拖动【react-dnd、react-dnd-html5-backend、immutability-helper（用于在不改变原始数据的情况下修改数据副本的工具，与该demo没有直接关系）】
        `,
        tags: "第三方库",
    },
    {
        key: "37",
        name: "BaseForm",
        description: `
            antd基本表单项
        `,
        tags: "antd使用",
    },
    {
        key: "38",
        name: "CombineForms",
        description: `
            组合表单同时填写或者同时不填写
        `,
        tags: "antd使用",
    },
    {
        key: "39",
        name: "EchartsBase",
        description: `
            Echarts基本使用
        `,
        tags: "echarts使用",
    },
    {
        key: "40",
        name: "ChinaColor",
        description: `
            根据数据多少在中国地图显示不同程度的深浅
        `,
        tags: "echarts使用",
    },
];
const dataSource5 = [
    {
        key: "41",
        name: "WorldMap",
        description: `
            世界地图使用
        `,
        tags: "echarts使用",
    },
    {
        key: "42",
        name: "TitleSwitch",
        description: `
            给图表标题添加点击事件进行切换图表配置项
        `,
        tags: "echarts使用",
    },
    {
        key: "43",
        name: "Lodash",
        description: `
            【lodash】Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。https://www.lodashjs.com/
        `,
        tags: "第三方库",
    },
    {
        key: "44",
        name: "CSSModules",
        description: `
            CSS Modules解决了命名冲突和全局样式污染问题，解决css选择器嵌套过深问题。
        `,
        tags: "js基础使用",
    },
    {
        key: "45",
        name: "WebsocketUse",
        description: `
            Websocket使用。
        `,
        tags: "js基础使用",
    },
    {
        key: "46",
        name: "geolocation",
        description: `
            获取用户位置信息。
        `,
        tags: "js基础使用",
    },
    {
        key: "47",
        name: "ProgressiveImage",
        description: `
            渐进式图片加载【react-progressive-graceful-image】
        `,
        tags: "第三方库",
    },
    {
        key: "48",
        name: "ShadowStyle",
        description: `
            略过柱状图阴影浮现
        `,
        tags: "echarts使用",
    },
    {
        key: "49",
        name: "CryptoJS",
        description: `
            三方库加密【crypto-js】
        `,
        tags: "第三方库",
    },
    {
        key: "50",
        name: "ChangeFavicon",
        description: `
            修改网页图标、标题
        `,
        tags: "js基础使用",
    },
];
const dataSource6 = [
    {
        key: "51",
        name: "ColorThiefUse",
        description: `
            获取图片主色【colorthief】
        `,
        tags: "第三方库",
    },
    {
        key: "52",
        name: "TableAxios",
        description: `
            表格axios进行后端分页请求
        `,
        tags: "antd使用",
    },
    {
        key: "53",
        name: "TableDynamicField",
        description: `
            根据接口返回字段动态生成表格列
        `,
        tags: "antd使用",
    },
    {
        key: "54",
        name: "UseRouteHooks",
        description: `
            路由相关hooks，useLocation 获取location对象，useNavigate 路由跳转、前进后退，
            useSearchParams 获取查询参数。
        `,
        tags: "Hooks",
    },
    {
        key: "55",
        name: "UseTesseract",
        description: `
            图片文字识别【tesseract.js】
        `,
        tags: "第三方库",
    },
];
export default function MainMenu() {
    const [dataSource, setDataSource] = React.useState([]);
    function getData() {
        setDataSource((dataSource) => [
            ...dataSource1,
            ...dataSource2,
            ...dataSource3,
            ...dataSource4,
            ...dataSource5,
            ...dataSource6,
        ]);
    }
    React.useEffect(() => {
        getData();
    }, []);
    return (
        <div>
            <h2>特殊组件</h2>
            <p>
                1.读取JSON以表格形式显示 <b>序号16 组件名称TableJSONUse</b>{" "}
                <br />
            </p>
            <hr />
            <h1>菜单</h1>
            <Table dataSource={dataSource} columns={columns} />;
            <hr />
            <h1>ES语法</h1>
            <a href="/ESMenu.html">ES语法</a>
            <p>{`如果需要访问静态资源，比如这个ESMenu.html，可以放在public下，这样就可以访问到。`}</p>
            <h2>该项目使用说明</h2>
            <p style={{ textAlign: "left", marginLeft: "200px" }}>
                新增demo: <br />
                1.在该目录jsx文件中getData函数setDataSource回调中新增表格选项条数{" "}
                <br />
                2.创建文件 <br />
                3.在routes.js文件中关联路由和文件关系 <br />
                4.每个新案例均要引入 <br />
                &nbsp;&nbsp;&nbsp;&nbsp; import "../../common/common.css" <br />
                &nbsp;&nbsp;&nbsp;&nbsp; &lt;button
                className='returnButton'&gt;&lt;a
                href="/"&gt;点击返回主菜单&lt;/a&gt;&lt;/button&gt; <br />
            </p>
            <br />
            <hr />
        </div>
    );
}
